<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。 */
        .box1 {
            width: 800px;
            height: 300px;
            border: 10px solid red;


        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 3s 3s linear;
            /* transition-property 规定应用过渡效果的 CSS 属性的名称	 */
            /* transition-property: margin-left; */
            /* transition-duration	规定过渡效果要持续多少秒或毫秒。 */
            /* transition-duration: 10s; */
            /* transition-delay 规定过渡效果的延迟（以秒计）。*/
            /* transition-delay: 3s; */


            /* transition-timing-function	规定过渡效果的速度曲线。
            linear
            ease 默认值 开始慢，中间快，结束慢
            ease-in 开始慢，越来越快
            ease-out 开始快，越来越慢
            ease-in-out 开始结束都慢，中间快
            cubic-bezier(n,n,n,n)
            */

            /* transition-timing-function: cubic-bezier(0, 1.2, 1, -0.47); */
        }

        .box1:hover .box2 {
            margin-left: 700px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>